<template>
    <div>
        <div class="brand">
            vue-v2last-admin
        </div>
        <div class="mainNav">
            <MainNavbar></MainNavbar>
        </div>
        <div class="mainContainer">
            <div class="mainSide">
                <MainSidebar></MainSidebar>
            </div>
            <div class="mainContent">
                <MainContent></MainContent>
            </div>
        </div>

    </div>
</template>
  
<script>
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
export default {
    provide() {
        return {

        }
    },
    data() {
        return {
            loading: false
        }
    },
    components: {
        MainNavbar, MainSidebar, MainContent
    },

    created() {

    },
    mounted() {

    },
    methods: {


    }
}
</script>
<style lang="scss" scoped>
.brand {
    text-align: center;
    padding-top: 10px;
    color: #fff;
    background-color: #545c64;
    position: fixed;
    top: 0;
    left: 0;
    width: 15%;
    height: 50px;
}

.mainNav {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    height: 50px;
}

.mainContainer {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .mainSide {
        width: 15%;
    }

    .mainContent {
        width: 85%;
    }
}
</style>